<template>
  <div class="servicePhone">
    <van-tabs v-model:active="active" swipeable >
      <van-tab title="联系园区">
        <ul v-if="active === 0">
          <li v-for="item in phoneProps" :key="item.name">
            <div class="servicePhone_left">
              <span>{{item.name}}</span>
              <div style="margin-top: 5px;">
                <van-icon name="phone" />
                <span style="margin-left: 5px">{{item.phone}}</span>
              </div>
            </div>
            <div class="servicePhone_right">
              <div>
                <a :href="`sms: ${item.phone}`">
                  <van-icon name="chat-o" />
                </a>
              </div>
              <div>
                <a :href="`tel: ${item.phone}`">
                  <van-icon name="phone" />
                </a>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="服务对接">
        <div class="service-dj">
          <van-empty description="暂无数据" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const active = ref(0);
  const phoneProps = ref([
    {
      name: '招商热线-招商引资',
      phone: '0571-86680588'
    },
    {
      name: '前台-访客咨询登记',
      phone: '0571-87711230'
    },
    {
      name: '办公室-会议室借用',
      phone: '0571-87711211'
    },
    {
      name: '招商一部-招商、创业服务',
      phone: '0571-87711205'
    },
    {
      name: '招商二部-招商、创业服务',
      phone: '0571-87711206'
    },
    {
      name: '财务室-开票、结算',
      phone: '0571-87711210'
    },
    {
      name: '主任办公室-党务行政',
      phone: '0571-87711222'
    },
    {
      name: '园区安保-秩序维护',
      phone: '0571-87711234'
    },
    {
      name: '监控室-安全监控',
      phone: '0571-87711200'
    }
  ])
</script>
<style scoped lang="less">
  .servicePhone {
    padding: 10px;
    .service-dj {
      height: 500px;
      .van-empty {
        height: 100%;
      }
    }
    ul {
      li {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #eee;
        padding: 10px;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0px 1px 3px #ccc;
        margin-top: 10px;
        .van-icon {
          font-size: 18px!important;
          color: #3a96f6!important;
        }
        .servicePhone_left {
          display: flex;
          flex-direction: column;
        }
        .servicePhone_right {
          display: flex;
          div {
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background: #3a96f6;
            border-radius: 24px;
            margin-left: 10px;
            .van-icon {
              color: #fff!important;
              font-size: 14px!important;
            }
          }
        }
      }
    }
  }
</style>
